<template>
  <div class="animation-list">
    <div class="div-animation">
      <px-button @click="isShowAnimation = true">添加动画</px-button>
      <px-button @click="handlePreviewAnimate">预览动画</px-button>
      <div v-if="componentStore.curComponent">
        <px-tag v-for="(tag, index) in componentStore.curComponent.animations" :key="index" closable @close="handleRemoveAnimation(index)">
          <span>{{ tag.label }}</span>
          <SettingIcon class="cursor px-icon-setting" @click="handleAnimationSetting(index)" />
        </px-tag>
      </div>
    </div>

    <!-- 选择动画 -->
    <Modal v-model="isShowAnimation">
      <px-tabs v-model="animationActiveName">
        <px-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
          <px-scrollbar class="animate-container">
            <div
              v-for="(animate, index) in item.children"
              ref="animateRef"
              :key="animate.value"
              class="animate"
              @mouseenter="handleRunAnimation(animate, index)"
              @click="handleAddAnimation(animate)"
            >
              <div>
                {{ animate.label }}
              </div>
            </div>
          </px-scrollbar>
        </px-tab-pane>
      </px-tabs>
    </Modal>
    <!-- 编辑动画配置 -->
    <AnimationSettingModal v-if="isShowAnimationSetting" :cur-index="curIndex" @close="isShowAnimationSetting = false" />
  </div>
</template>

<script setup lang="ts">
import { useAnimation, useComponent } from "@visual/stores";
import { eventBus } from "@visual/utils";
import animationClassData from "@visual/utils/animationClassData";
import runAnimation from "@visual/utils/runAnimation";
import { ref } from "vue";
import AnimationSettingModal from "./AnimationSettingModal.vue";
import Modal from "./Modal.vue";
import { Setting as SettingIcon } from "@px-ui/icons-vue";

const isShowAnimation = ref(false);
const isShowAnimationSetting = ref(false);
const curIndex = ref(0);
const animationActiveName = ref("进入");

const componentStore = useComponent();
const { addAnimation, removeAnimation } = useAnimation();

function handlePreviewAnimate() {
  eventBus.emit("runAnimation");
}

function handleAddAnimation(animate) {
  addAnimation(animate);
  isShowAnimation.value = false;
}

function handleRemoveAnimation(index) {
  removeAnimation(index);
  if (!componentStore.curComponent?.animations.length) {
    // 清空动画数据，停止运动
    eventBus.emit("stopAnimation");
  }
}

function handleAnimationSetting(index) {
  isShowAnimationSetting.value = true;
  curIndex.value = index;
}

const animateRef = ref();
async function handleRunAnimation(animate, index) {
  if (animate.pending) return;

  animate.pending = true;
  await runAnimation(animateRef.value[index], [animate]);

  // 防止无限触发同一元素的动画
  setTimeout(() => {
    animate.pending = false;
  }, 100);
}
</script>

<style lang="scss">
.animation-list {
  .cursor {
    cursor: pointer;
  }

  .px-icon-setting {
    width: 14px;
  }

  .div-animation {
    text-align: center;

    & > div {
      margin-top: 20px;
    }

    .px-tag {
      display: flex;
      align-items: center;
      width: 50%;
      margin: auto;
      margin-bottom: 10px;
    }
  }

  .px-scrollbar__view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 10px;

    .animate {
      cursor: pointer;
    }

    .animate > div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 60px;
      margin: 0 12px;
      margin-bottom: 10px;
      font-size: 12px;
      color: #333;
      cursor: pointer;
      user-select: none;
      background: #f5f8fb;
      border-radius: 3px;
    }
  }

  .px-tag__content {
    display: flex;
    align-items: center;
  }
}
</style>
